<template>
	<common-page title="注册新账号">
		
		<el-form ref="stepForm_0" :model="form" :rules="rules" :label-width="120">
			<el-form-item label="登录账号" prop="user">
				<el-input v-model="form.user" placeholder="请输入登录账号"></el-input>
				<div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
			</el-form-item>
			<el-form-item label="登录密码" prop="password">
				<el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
				<sc-password-strength v-model="form.password"></sc-password-strength>
				<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
			</el-form-item>
			<el-form-item label="确认密码" prop="password2">
				<el-input v-model="form.password2" type="password" show-password placeholder="请再一次输入登录密码"></el-input>
			</el-form-item>
			<el-form-item label="" prop="agree">
				<el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox><span class="link" @click="showAgree=true">《平台服务协议》</span>
			</el-form-item>
		</el-form>
		
		<el-form style="text-align: center;">
			<el-button type="primary" @click="save">提交</el-button>
		</el-form>
		<el-dialog v-model="showAgree" title="平台服务协议" :width="800" destroy-on-close>
			平台服务协议
			<template #footer>
				<el-button @click="showAgree=false">取消</el-button>
				<el-button type="primary" @click="showAgree=false;form.agree=true;">我已阅读并同意</el-button>
			</template>
		</el-dialog>
	</common-page>
</template>

<script>
	// import scPasswordStrength from '@/components/scPasswordStrength';
	import commonPage from './components/commonPage'

	export default {
		components: {
			commonPage,
			// scPasswordStrength
		},
		data() {
			return {
				stepActive: 0,
				showAgree: false,
				form: {
					user: "",
					password: "",
					password2: "",
					agree: false,
					// userName: "",
					// email: "",
					// userType: "1",
					// open: []
				},
				rules: {
					user: [
						{ required: true, message: '请输入账号名'}
					],
					password: [
						{ required: true, message: '请输入密码'}
					],
					password2: [
						{ required: true, message: '请再次输入密码'},
						{validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error('两次输入密码不一致'));
							}else{
								callback();
							}
						}}
					],
					agree: [
						{validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('请阅读并同意协议'));
							}else{
								callback();
							}
						}}
					],
					// userName: [
					// 	{ required: true, message: '请输入真实姓名'}
					// ],
					// email: [
					// 	{ required: true, message: '请输入邮箱地址'}
					// ],
					// userType: [
					// 	{ required: true, message: '请选择账户类型'}
					// ],
					// open: [
					// 	{ required: true, message: '请选择开通类别'}
					// ]
				}
			}
		},
		mounted() {

		},
		methods: {
			// pre(){
			// 	this.stepActive -= 1
			// },
			// next(){
			// 	const formName = `stepForm_${this.stepActive}`
			// 	this.$refs[formName].validate((valid) => {
			// 		if (valid) {
			// 			this.stepActive += 1
			// 		}else{
			// 			return false
			// 		}
			// 	})
			// },
			// save(){
			// 	const formName = `stepForm_${this.stepActive}`
			// 	this.$refs[formName].validate((valid) => {
			// 		if (valid) {
			// 			this.stepActive += 1
			// 		}else{
			// 			return false
			// 		}
			// 	})
			// },

			save(){
				const formName = `stepForm_${this.stepActive}`
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// this.stepActive += 1
						console.log('提交');

					}else{
						return false
					}

				})
			},

			goLogin(){
				this.$router.push({
					path: '/login'
				})
			}
		}
	}
</script>

<style scoped>


</style>
